<template>
<div>
  <strong style="color: #ffd04b">凉薄后台管理系统</strong>
  <div class="header-avatar">

    <el-avatar :src="userInfo.avatar" style="margin-right: 8px"></el-avatar>
    <el-dropdown>
  <span class="el-dropdown-link">
    {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><router-link :to="{name:'SysUserCenter'}">个人中心</router-link></el-dropdown-item>
        <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</div>
</template>

<script>
import router from "@/router";

export default {
  name: "Header",
  data(){
    return{
      userInfo:{

      }
    }
  },
  methods:{
    logout(){
      this.$axios.post("/api/logout").then((res)=>{
        localStorage.clear();
        sessionStorage.clear();
        this.$store.commit("clearState")
        this.$message.success(res.data.msg)
        router.push("/login")

      })
    },
    getUserInfo(){
      this.$axios.get("/api/sys/user/userInfo").then(res=>{
        this.userInfo=res.data.data
      })
    }
  },
  created() {
    this.getUserInfo();
  }
}
</script>

<style scoped>
.header-avatar{
  float: right;
  with:210px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffd04b;
}
.el-icon-arrow-down {
  font-size: 12px;
}
a{
  text-decoration: none;
}

</style>